<template>
    <div class="start" :class="startType">
      <span v-for="itemClass in itemClasses" :class="itemClass" class="start-item" track-by="$index">
      </span>
    </div>
</template>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl";
.start{
  font-size: 0;
}
.start .start-item{
  display: inline-block;
  background-repeat: no-repeat;
}
 .star-48 .start-item{
  width: 20px;
  height: 20px;
  margin-right: 22px;
  background-size: 20px 20px;
}
 .star-48  .last-child{
    margin-right: 0;
  }
.star-48  .on{
  bg-img("star48_on")
}
 .star-48 .half{
  bg-img("star48_half")
  }
 .star-48 .off{
  bg-img("star48_off")
  }
 .star-36 .start-item{
    width: 15px;
    height: 15px;
    margin-right: 6px;
    background-size: 15px 15px;
  }
   .star-36  .last-child{
    margin-right: 0;
  }
  .star-36  .on{
  bg-img("star36_on")
  }
  .star-36  .half{
  bg-img("star36_half")
  }
  .star-36  .off{
  bg-img("star36_off")
  }
 .star-24 .start-item{
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background-size: 10px 10px;
  }
  .star-24  .last-child{
    margin-right: 0;
  }
 .star-24 .on{
  bg-img("star24_on")
  }
  .star-24  .half{
  bg-img("star24_half")
  }
 .star-24 s.off{
  bg-img("star24_off")
  }
</style>

<script type="text/ecmascript-6">
  const LENGTH = 5
  const CLS_ON = 'on'
  const CLS_HALF = 'half'
  const CLS_OFF = 'off'
  export default {
    props: {
      size: {
        type: Number
      },
      score: {
        type: Number
      }
    },
    computed: {
      startType () {
        return 'star-' + this.size
      },
      itemClasses () {
        let result = []
        let score = Math.floor(this.score * 2) / 2
        let hasDecimal = score % 1 !== 0
        let interger = Math.floor(score)
        for (let i = 0; i < interger; i++) {
          result.push(CLS_ON)
        }
        if (hasDecimal) {
          result.push(CLS_HALF)
        }
        while (result.length < LENGTH) {
          result.push(CLS_OFF)
        }
        return result
      }
    }
}
</script>
